<script setup lang="ts">
withDefaults(defineProps<{
  type: string
  price: string
  minisum: string
  expireTime: string
  width?: number
}>(), {
  width: 570,
})
</script>

<template>
  <view class="relative mb-26rpx h-158rpx" :style="{ width: `${width}rpx` }">
    <image
      class="absolute bottom-0 left-0 right-0 top-0 h-158rpx w-570rpx"
      src="@/static/images/coupon_detail_bg_medium.png"
      :style="{ width: `${width}rpx` }"
    />
    <view class="absolute left-6rpx top-6rpx z-10 rounded-br-20rpx rounded-tl-20rpx from-#FF966D to-#FA5431 bg-gradient-to-r p-10rpx text-26rpx text-white font-bold leading-26rpx">
      {{ type }}
    </view>
    <view class="relative z-10 h-full flex items-center">
      <view class="mt-16rpx px-56rpx text-50rpx text-#F53B25 font-black leading-50rpx">
        ¥{{ parseInt(price) }}
      </view>
      <view class="ml-36rpx mt-7rpx">
        <view class="text-28rpx text-#666666 font-medium leading-28rpx">
          满{{ parseInt(minisum) }}元可使用
        </view>
        <Spacer height="30" />
        <view class="text-28rpx text-#999999 font-medium leading-28rpx">
          {{ expireTime }}截止
        </view>
      </view>
    </view>
  </view>
</template>
